<template>
	<view class="card">
		<view class="card_head d-flex mb-30">
			<text class="card_head_title w-bold">企业数据</text>
			<view class="card_head_describe d-flex">
				<text class="ml-20">刚刚</text>
				<text class="ml-10">150****9012查询了个人风险报告</text>
			</view>
		</view>
		
		<view class="msg d-flex">
			<view class="msg_item">
				<view class="msg_item_li bg1 d-flex mb-20">
					<view>
						<text class="msg_title">信贷风险报告</text>
						<text class="msg_descripe">一份报告了解我的信用风险</text>
						<navigator class="btn">Go</navigator>
					</view>
					
					<image src="/static/image/home/icon3.svg" class="icon3 icon" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="msg_item">
				<view class="msg_item_li bg1 mr-20">
					<text class="msg_title">法人风险</text>
					<image src="/static/image/home/icon4.svg" class="icon4 icon" mode="widthFix"></image>
				</view>
				
				<view class="msg_item_li bg1 mr-20">
					<text class="msg_title">企业年报</text>
					<image src="/static/image/home/icon5.svg" class="icon5 icon" mode="widthFix"></image>
				</view>
				
				<view class="msg_item_li bg1">
					<text class="msg_title">企业资质</text>
					<image src="/static/image/home/icon6.svg" class="icon6 icon" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.card {
	&_head {
		align-items: end;
		flex-direction: row;
		
		&_title {
			font: {
				size: 30rpx;
				weight: bold;
			}
		}
		
		&_describe {
			flex-direction: row;
			text {
				color: #52525A;
				font: {
					size: 24rpx;
				}
			}
		}
	}
	
	.msg {
		align-items: center;
		justify-content: space-between;
		
		&_item {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			
			&_li {
				flex: 1;
				padding: 25rpx 20rpx;
				border-radius: 14rpx;
				&.d-flex {
					flex-direction: row;
				}
				
				&:first-child {
					justify-content: space-between;
				}
				
				&.flex-2 {
					flex: 3
				}
				
				&.bg1 {
					background-color: rgba(229, 240, 255, 1);
				}
				
				.btn {
					margin-top: 30rpx;
					width: 120rpx;
					height: 55rpx;
					border-radius: 40rpx;
					text-align: center;
					line-height: 50rpx;
					color: #fff;
					background-color: rgba(95, 133, 255, 1);
					font: {
						weight: bold;
						size: 26rpx;
					}
				}
				
				.msg_title {
					margin-bottom: 25rpx;
					font: {
						size: 26rpx;
						weight: bold;
					}
				}
				
				.msg_descripe {
					color: #6C7282;
					font: {
						size: 22rpx;
					}
				}
				
				.icon {
					max-width: 100%;
					
					&.icon3 {
						width: 180rpx;
					}
					&.icon4 {
						width: 120rpx;
						margin: auto;
					}
					&.icon5 {
						width: 120rpx;
						margin: auto;
					}
					&.icon6 {
						width: 120rpx;
						margin: auto;
					}
				}
			}
		}
	}
}
</style>
